<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/header.jsp" %>
<div class="row" id="menuListTableFrame">
	<div class="col-xs-12">
		<div class="row">
			<div class="col-xs-12">
				<div class="table-header">
					父菜单列表
				</div>

				<div>
					<table id="menuListTable" class="table table-striped table-bordered table-hover">
						<thead>
							<tr>
								<th style="text-align: center;">菜单编号</th>
								<th style="text-align: center;">菜单名称</th>
								<th style="text-align: center;">是否子菜单</th>
								<th style="text-align: center;">菜单样式</th>
								<th style="text-align: center;">操作</th>
							</tr>
						</thead>
						<tbody>
						    <c:forEach items="${menuList }" var="menu" >
							    <tr>
									<td>${menu.menuId}</td>
									<td>${menu.menuName}</td>
									<td>
										<hw:dictName dictType='D00001' dictCode='${menu.isLeaf}'/>
									</td>
									<td>${menu.menuClass}</td>
									<td>
										<div class="hidden-sm hidden-xs action-buttons">
											<a class="blue" href="#" onclick="detailMenu('${menu.menuId}','show')" title="查看详情">
												<i class="ace-icon fa fa-search-plus bigger-130"></i>
											</a>
											<a class="red" href="#" onclick="removeMenu('${menu.menuId}')" title="删除">
												<i class="ace-icon fa fa-trash-o bigger-130"></i>
											</a>
										</div>
									</td>
								</tr>
								</c:forEach>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">

var dataTables;		
var scripts = [null, null];
$('.page-content-area').ace_ajax('loadScripts', scripts, function() {
	$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
		_title: function(title) {
			var $title = this.options.title || '&nbsp;'
			if( ("title_html" in this.options) && this.options.title_html == true )
				title.html($title);
			else title.text($title);
		}
	}));
	
	
	dataTables = $("#menuListTable").dataTable({
	     bAutoWidth: false,
	     "oLanguage" : oLanguage,
	     "bDestroy":true,
		"aoColumnDefs": [{"bSortable": false, "aTargets": [1,3,4 ]}],
		"aaSorting": [],
		"fnInitComplete": function(param){
			$("#menuListTable_filter").append("<button class=\"btn btn-sm btn-info btn-right\" type=\"button\" id=\"addMenu\">"+
					"<i class=\"ace-icon fa fa-plus-square bigger-110\"></i>"+
						"新增"+
					"</button>");
		}
	});
	
	$("#addMenu").on("click",function(){
		detailMenu("","add");
	});
	
	//新增/修改 dialog
	$('#menuIframe').dialog({
		hide:true,
		autoOpen:false,
		width: 850,
		height:700,
		modal:true,
		title: "<div class='widget-header'><h4 class='smaller'><i class='ace-icon fa fa-cog green'></i>&nbsp;菜单管理</h4></div>",
		title_html: true,
		open: function (event,ui) {
			var flag = $(this).data('flag');
			if(flag == "add"){
				$("#btnMenuSave").show();
				$("#btnMenuCancle").hide();
				$("#btnMenuModify").hide();
			}else if(flag == "show"){
				$("#btnMenuSave").hide();
				$("#btnMenuCancle").hide();
				$("#btnMenuModify").show();
			}
        },
		buttons: [
			{
				id: "btnMenuModify",
				html: "<i class='ace-icon fa fa-pencil-square-o bigger-110'></i>&nbsp; 修改",
				"class" : "dialog-button-hide btn btn-primary btn-minier",
				click: function() {
					
					$("#btnMenuModify").hide();
					$("#btnMenuSave").show();
					$("#btnMenuCancle").show();
					
					modify();
				}
			},
			{
				id: "btnMenuSave",
				html: "<i class='ace-icon fa fa-floppy-o bigger-110'></i>&nbsp; 保存",
				"class" : "dialog-button-hide btn btn-success btn-minier",
				click: function() {
					save();
				}
			},
			{
				id: "btnMenuCancle",
				html: "<i class='ace-icon fa fa-undo bigger-110'></i>&nbsp; 取消",
				"class" : "dialog-button-hide btn btn-warning btn-minier",
				click: function() {
					cancle();
				}
			},												
			{
				id: "btnMenuClose",
				html: "<i class='ace-icon fa fa-times bigger-110'></i>&nbsp; 关闭",
				"class" : "btn btn-minier",
				click: function() {
					$(this).dialog("close");
					$(this).dialog("destory");
				}
			}				
		]				
	});
});

var active_class = 'success';
$('#menuListTable').on('click', 'tbody tr', function() {
	var $row = $(this).closest('tr');
	if ($row.hasClass(active_class) == false) {
		dataTables.$('tr.' + active_class).removeClass(active_class);
		$row.addClass(active_class);
	}
});
$('#menuListTable').on('dblclick', 'tbody tr' , function(){
	var aData = dataTables.fnGetData(this); 
	if (aData == null) {
		return;
	} 
	searchSubs(aData[0]);
});	


function searchSubs(menuId){
	$("#menuSubListIframe").load("${ctx}/menu/list.do?parentId=" + menuId);
}

function detailMenu(menuId,flag){
	$("#menuIframe").load("${ctx}/menu/toDetail?pk=" + menuId+"&flag="+flag,function(){
		$('#menuIframe').data("flag",flag).dialog("open");
	});
}

function removeMenu(menuId){
	removeItem(menuId,function(){
		$("#menuList").load("${ctx}/menu/list.do?temp="+new Date().getTime());
		$("#menuSubListIframe").empty();
	});
}


function removeItem(menuId,callback){
	if(confirm("确定删除该项吗?")){
			$.post("${ctx}/menu/checkMenu.do",{"menuId":menuId},function(result){
				if(result == "success"){
					$.post("${ctx}/menu/remove.do",{"menuId":menuId},function(result){
						if(result[0] == "ok"){
							alert("删除成功！");
							callback();
						}else{
							alert(result[1]);
						}
					})
				}else{
					alert("此菜单存在子菜单，没法被删除！");
				}
			});
		}	
	}
	

</script>